<!DOCTYPE html>
<script src="../../resources/run-after-layout-and-paint.js"></script>
<div style="width: 200px; height: 200px; will-change: transform; background-color: lightgreen"></div>
<div style="position: relative; top: -50px; left: 50px; width: 200px; height: 200px; background-color: blue">
    <div id="child" style="background-color: red; width: 100px; height: 100px;"></div>
</div>
<script>
if (window.testRunner)
    testRunner.waitUntilDone();

runAfterLayoutAndPaint(function() {
    document.getElementById('child').style.backgroundColor = 'green';
    runAfterLayoutAndPaint(function() {
        if (window.testRunner)
            testRunner.notifyDone();
    });
});
</script>
